<template>
  <div class="export-dialog" v-dialog-drag>
    <!-- 头部 -->
    <div class="dialog-header">
      <span class="dialog-title">导出数据</span>
      <i class="el-icon-close" @click="handleClose"></i>
    </div>
    <div class="dialog-body">
      <div class="pipe-dialog-content">
        <div class="step-div step1" v-if="nowStep === 1">
          <el-radio-group v-model="stepData.radio1" size="small">
            <el-radio label="1">新建工程</el-radio>
            <el-radio label="2">改造工程</el-radio>
          </el-radio-group>
        </div>
        <div class="step-div step2" v-if="nowStep === 2">
          <el-radio-group v-model="stepData.tagid" size="small" @change="getNetDesignDatas">
            <el-radio v-for="m in netLists" :key="m.C_EXPWEB_TAG_ID" :label="m.C_EXPWEB_TAG_ID">{{ m.TAGCN }}</el-radio>
          </el-radio-group>
        </div>
        <div class="step-div step3" v-if="nowStep === 3">
          <el-checkbox-group v-model="stepData.checkList" size="small">
            <el-checkbox v-for="m in netDesignDatas" :key="m.C_EXPWEB_ITEM_ID" :label="m.C_EXPWEB_ITEM_ID">{{ m.TAGCN }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="step-div step4" v-if="nowStep === 4">
          <el-radio-group v-model="stepData.radio3" size="small">
            <el-radio label="1">框选矩形</el-radio>
            <el-radio label="2">框选多边形</el-radio>
            <el-radio label="3">当前项目边界</el-radio>
            <el-radio label="4">线路缓冲区导出<el-input v-model="stepData.bufferDistance" placeholder="请输入缓冲区距离"></el-input>米</el-radio>
          </el-radio-group>
          <!-- <div class="upload-div">
            <p>上传附件</p>
            <el-upload action="" multiple :before-upload="handlePreview" v-model="uploadValue" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
              <el-button size="small" type="primary">{{ uploadValue.name ? '重新上传' : '点击上传' }}</el-button>
              <span>{{ uploadValue.name }}</span>
            </el-upload>
          </div> -->
        </div>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button size="mini" v-if="nowStep !== 1" @click="exportPrev">上一步</el-button>
      <el-button size="mini" v-if="nowStep !== 4" @click="exportNext">下一步</el-button>
      <el-button size="mini" v-if="nowStep === 4" @click="handleConfirm">导出</el-button>
      <el-button size="mini" @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { mapObj } from '@/widgets/mapUtils'
import { getNetTypeApi, getNetDesignApi } from '@/deps/apis/exportApi'
let hashDatas = null
export default {
  name: 'ExportDialog',
  components: {},
  data() {
    return {
      nowStep: 1,
      stepData: {},
      uploadValue: [],
      netDesignDatas: []
    }
  },
  async created() {
    hashDatas = {}
    this.nowStep = 1
    this.stepData = {
      radio1: '1',
      tagid: '',
      checkList: [],
      radio3: '1',
      bufferDistance: '50'
    }
    getNetTypeApi().then(res => {
      this.netLists = res
      this.stepData.tagid = this.netLists[0].C_EXPWEB_TAG_ID
      this.getNetDesignDatas()
    })
    mapObj.pm.enable({
      allowSelfIntersection: false
    })
  },
  methods: {
    getNetDesignDatas() {
      this.stepData.checkList = []
      if (hashDatas[this.stepData.tagid]) {
        this.netDesignDatas = hashDatas[this.stepData.tagid]
        return
      }
      getNetDesignApi({
        tagid: this.stepData.tagid
      }).then(res => {
        this.netDesignDatas = res
        hashDatas[this.stepData.tagid] = res
      })
    },
    handlePreview(file) {
      this.uploadValue = file
      return false
    },
    exportPrev() {
      if (this.stepData.radio1 === '1' && this.nowStep === 4) {
        this.nowStep = 1
        return
      }
      this.nowStep--
    },
    exportNext() {
      if (this.stepData.radio1 === '1' && this.nowStep === 1) {
        this.nowStep = 4
        return
      }
      this.nowStep++
    },
    // 显示消息提示
    showMessage(message, type = 'warning', persistent = false) {
      if (messageInstance) {
        messageInstance.close()
      }
      messageInstance = this.$message({
        message,
        type,
        duration: persistent ? 0 : 3000,
        onClose: () => {
          messageInstance = null
        }
      })
    },
    // 公共的确认框逻辑
    showConfirm(message, callback, catchFun) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(callback)
        .catch(() => {
          catchFun()
        })
    },
    handleClose() {
      this.$emit('closeExportDialog')
    },
    handleConfirm() {
      this.$emit('confirmExport')
    }
  },
  beforeDestroy() {
    hashDatas = null
  }
}
</script>

<style lang="scss">
@import url('./panelComponents/exportDialog.scss');
</style>
